<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
  <title>Page Translation</title>
  
  <script type="text/javascript" src="chrome://translator/content/mozkit.js" ></script>
  <script type="text/javascript" src="chrome://translator/content/translator.js"></script>
  <script type="text/javascript" src="chrome://translator/content/languages.js" ></script>
  <script type="text/javascript" src="chrome://translator/content/plugins/translate.js" ></script>
  <script type="text/javascript" src="chrome://translator/content/plugins/detect.js" ></script>
  <script type="text/javascript" src="chrome://translator/content/plugins/translatePage.js"></script>
  <script type="text/javascript" src="chrome://translator/content/iterator.js"></script>
  <script type="text/javascript" src="chrome://translator/content/plugins/detectPageLanguage.js"></script>
  <script type="text/javascript" src="chrome://translator/content/services/google.js" ></script>
  <script type="text/javascript" src="chrome://translator/content/services/xerox.js" ></script>
  <script type="text/javascript" src="chrome://translator/content/services/eidetica.js" ></script>
  <script type="text/javascript" src="chrome://translator/content/services/vozme.js" ></script>
  
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>



  
  
  
  <style>
    #urlBar {
       
        float: left;
        width: 100%;
        text-align: right;
        padding: 10px 0;
        
        
    }
    
    #url {
        font-size: 1.2em;
        font-weight: bold;
        padding: 7px;
        width: 80%;
        float: left;
        border: 1px solid;
        background: #FFFAAF;
        -moz-border-radius: 3px;
        font-family:georgia;
    }
    
    #url:focus {
        
    }
    
    .controls {
        width: 5%;
        padding: 10px;
        font-size: 1.2em;
        float: left;
        margin: 0px 5px;
        -moz-border-radius: 3px;
         border: 1px solid;
         padding: 7px;
    }
    
 
    
    #browser {
        width:100%;
        height:600px;
    }


    #progress {
      width: 100px;
      height: 25px;
      background-color: gray;
      border: 1px solid;
    }

    #progress div {
      width : 0%;
      height: 25px;
      background: green;
    }

</style>  
  
<script>

  

  $(function () {
    $("#go").click(function () {
      $("#browser").attr("src", $("#url").val()); 
    });
        
    $("#translate").click(function () {

      


      translator.translatePage({
        dom : $("#browser")[0].contentDocument,
        destLang : translator.getNativeLanguage().name,
        srcLang : 'GERMAN',
        progress : function (node, done, total) {
          $(node.parentNode).css('background', 'yellow');
          $('#progress div').css('width', ((done / total) * 100) + "%");
         // $('#progress')[0].innerHTML =  done + ' / ' + total;
        },
        languageDetected : function (lang) {
          Application.console.log("This page appears to be written in " +  lang.name);
        },
        success : function () {
                  
        },
        fail : function (e) {
          alert('2');
        }

      });            
    });

  });    
</script>
</head>
<body>
<div id="urlBar">
    <input type="text" id="url" value="http://de.wikipedia.org/wiki/Special:Random" />
    <button class="controls" id="go">Go</button>
    <button class="controls" id="translate">Translate</button>
    <button class="controls" id="guess">Guess</button>
    
</div>
<iframe id="browser" src="http://de.wikipedia.org/wiki/Special:Random"></iframe>


<div id="progress">
  <div />
</div>

</body>
</html>
